<template>
  <div class="creators-data">
    <el-tabs v-model="activeName" @tab-click="handleClick()" type="border-card">
      <el-tab-pane label="核心数据" name="first">
        <statistics-data
          :statistics="coreData"
          :xAxis="xAxis"
          :yAxis="yAxis"
          :series="series"
          :legend="legend"
          :flag="flag"
          :tableLoadData="tableLoadData"
          :tableHeadConfig="tableHeadConfig"
          v-model="modelVal"
        ></statistics-data>
      </el-tab-pane>
      <!-- <el-tab-pane label="创作者占比" name="second">
        <div style="display:flex">
          <p>近30日发布过选项内容的人数：</p>
          <el-select v-model="type" placeholder="作品类型" multiple @change="changeType">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <p>比较池：</p>
          <el-select v-model="compare" placeholder="比较池" @change="changePool" :clearable="true">
            <el-option
              v-for="item in poolOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <pie-chart :series="series" :seriesName="seriesName" v-if="flag"></pie-chart>
      </el-tab-pane> -->
      <el-tab-pane label="创作者排名" name="third">
        <search-list
          :api-url="$url.StatisCreatorRank"
          :option="searchOpt"
          :itemPerRow="8"
          ref="rankList"
          v-if="activeName == 'third'"
          :beforeQuery="beforeQuery"
        >
          <el-table-column prop="nickName" label="昵称"></el-table-column>
          <el-table-column prop="workCnt" label="作品数"></el-table-column>
          <el-table-column prop="fansCnt" label="粉丝量"></el-table-column>
          <el-table-column prop="viewCnt" label="被浏览量"></el-table-column>
          <el-table-column prop="favorCnt" label="被收藏量"></el-table-column>
          <el-table-column prop="shareCnt" label="被分享量"></el-table-column>
        </search-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import StatisticsData from "@/components/StatisticsData";
// import PieChart from '@/components/PieChart';
export default {
  components: {
    StatisticsData,
    // PieChart,
  },
  data() {
    return {
      activeName: "first",
      coreData: {},
      xAxis: [],
      yAxis: [],
      seriesName: "",
      series: [],
      legend: [],
      flag: false,
      tableLoadData: [],
      tableHeadConfig: [],
      modelVal: "",
      compare: "0" || "",
      type: ["1"] || [],
      isAll: 1,
      typeOptions: [
        {
          value: "1",
          label: "视频",
        },
        {
          value: "2",
          label: "文章",
        },
        {
          value: "3",
          label: "图片",
        },
      ],
      poolOptions: [
        {
          value: "0",
          label: "近30日的MAU",
        },
        {
          value: "1",
          label: "近30日的月登录用户数",
        },
        {
          value: "2",
          label: "全部创作者",
        },
      ],
      searchOpt: [
        {
          type: "allSl",
          name: "isAll",
          label: "累计数据",
        },
        {
          type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
          name: "time",
          label: "时间",
          conf: {
            type: "daterange",
            format: "yyyy-MM-dd",
            "value-format": "yyyy-MM-dd",
            placeholder: "时间",
          },
        },
        {
          type: "orderSelect",
          name: "order",
          label: "排序",
        },
        {
          type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
          name: "searchKey",
          label: "用户昵称",
        },
      ],
    };
  },
  created() {
    this.handleClick();
  },
  watch: {
    modelVal(newval) {
      var startTime = newval.dataVal[0];
      var endTime = newval.dataVal[1];
      this.handleClick(startTime, endTime);
    },
  },
  methods: {
    changeType(data) {
      this.type = data;
      this.getPieData();
    },
    changePool(data) {
      this.compare = data;
      this.getPieData();
    },
    async handleClick(startTime, endTime) {
      this.$cancel(); //未加载完的清除取消上次请求，只保留最后一次请求
      this.flag = false;
      this.tableLoadData = [];
      this.tableHeadConfig = [];
      this.legend = [];
      this.yAxis = [];
      this.xAxis = [];
      this.series = [];
      if (this.activeName == "first") {
        await this.$service.StatisCreatorCore().then((res) => {
          console.log(res);
          this.coreData.data = {};
          this.coreData.data.totalPublishCnt = res.totalPublishCnt;
          this.coreData.data.creatorCnt = res.userCnt;
          this.$forceUpdate();
        });
        await this.$service
          .StatisCreatorCoreChart({
            startDate: startTime,
            endDate: endTime,
          })
          .then((res) => {
            this.tableLoadData = res.dayData;
            this.tableHeadConfig = this.$ENUMS.creator;
            this.legend = this.$ENUMS.creatorLegend;
            var Cnts = [[], [], []];
            res.dayData.map((item) => {
              this.xAxis.push(item.day);
              Cnts[0].push(item.userCnt);
              Cnts[1].push(item.publishCnt);
              Cnts[2].push(item.publishAvg);
            });
            Cnts.map((cnt, index) => {
              var serie = {
                name: this.legend[index],
                type: "line",
                data: cnt,
                yAxisIndex: index == 2 ? Cnts.length - 1 : null,
              };
              var y = {
                type: "value",
                min: 0,
                position: Cnts.length == index + 1 ? "right" : "left",
              };
              this.yAxis.push(y);
              this.series.push(serie);
            });
            this.flag = true;
          })
          .catch((err) => {});
      }
      if (this.activeName == "second") {
        this.getPieData();
      }
    },
    getPieData() {
      this.flag = false;
      this.$service
        .StatisCreatorRatio({
          compare: this.compare,
          workTypes: this.type.toString() || "1,2,3",
        })
        .then((res) => {
          res.list.forEach((element) => {
            if (element.name == "用户数") {
              element.name = "其他";
            }
          });
          res.list[0].value -= res.list[1].value;
          this.series = [
            {
              name: "",
              type: "pie",
              radius: "50%",
              data: res.list,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ];

          this.flag = true;
        })
        .catch((err) => {});
    },
    beforeQuery({ searchInfo }) {
      if (searchInfo.time) {
        var arryTime = searchInfo.time;
        searchInfo.startDate = arryTime[0];
        searchInfo.endDate = arryTime[1];
      }
      searchInfo.isAll = searchInfo.isAll || this.isAll;
      if (searchInfo.order == "") {
        searchInfo.order = 0;
      }
      this.$refs.rankList.s_pagination.size = 20;
    },
  },
};
</script>
<style lang="less" scoped>
.creators-data {
  text-align: left;
}
</style>
